<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <title>角色管理</title>
  <!--/*--> 引入css、jq、layui等样式、js <!--*/-->
  <meta th:include="~{layout/layout_hread :: head}">
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="/admin">首页</a>
            <a href="/admin/role">角色管理</a>
          </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
     onclick="location.reload()" title="刷新">
    <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-body ">
          <div class="layui-form layui-col-space5">
            <div class="layui-inline layui-show-xs-block">
              <input type="text" name="username" placeholder="请输入角色名" autocomplete="off"
                     class="layui-input">
            </div>
            <div class="layui-inline layui-show-xs-block">
              <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i>
              </button>
            </div>
          </div>
        </div>
        <div class="layui-card-header">
          <button class="layui-btn" onclick="xadmin.open('添加角色','/admin/roleAdd',600,400)"><i
              class="layui-icon"></i>添加角色
          </button>
        </div>
        <div class="layui-card-body layui-table-body layui-table-main">
          <table id="role-table" lay-filter="role"></table>
          <script type="text/html" id="barTool">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
          </script>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script>
  layui.use(['laydate', 'form', 'jquery', 'table'], function () {
    var laydate = layui.laydate;
    var form = layui.form;
    var $ = layui.jquery;
    var table = layui.table;

    //第一个实例
    table.render({
      elem: '#role-table'
      // , height: 400
      , url: '/admin/roleList' //数据接口
      , page: true //开启分页
      , request: {
        limitName: 'size'
      }
      , cols: [
        [ //表头
          {field: 'id', title: 'ID', width: 65, sort: true, fixed: 'left'}
          , {field: 'roleName', title: '角色名', width: 200, sort: true}
          , {field: 'roleType', title: '角色类型', width: 120, sort: true,templet: function(d){
            if (d.roleType==0){
              return '<b style="color: red">不可修改</b>'
            }
            return '普通'
          }}
          , {field: 'description', title: '描述', width: 300, sort: true}
          , {field: 'createTime', title: '创建时间', width: 177, sort: true}
          , {field: 'updateTime', title: '更新时间', width: 177, sort: true}
          , {fixed: 'right', title: '操作', toolbar: '#barTool', width: 150}
        ]
      ]
      , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.message, //解析提示文本
          "count": res.total, //解析数据长度
          "data": res.data //解析数据列表
        };
      }
    });

    //监听行工具事件
    table.on('tool(role)', function (obj) {
      var data = obj.data;
      //console.log(obj)
      if(data.roleType==0){
        layer.msg('不可修改类型角色！')
        return false
      }
      if (obj.event === 'del') {
        layer.confirm('确认要删除该角色吗？', function (index) {
          $.ajax({
            data: {id: data.id},
            url: '/admin/roleDelete',
            sync: false,//关闭异步
            type: 'post',
            success(adata) {
              layer.msg(adata.message);
              if (adata.code == 0) {
                window.setTimeout(function () {
                  obj.del();
                  layer.close(index);
                }, 1200)
              }
            }
          })
        });
      } else if (obj.event === 'edit') {
        var d = obj.data
        layer.open({
          title: '修改角色',
          type: 1,
          area: ['500px', '300px'],
          content: htmlBox(d.roleName, d.description),
          btn: ["确定", "取消"],
          btn1: function (index) {
            $.ajax({
              data: {
                id: d.id,
                roleName: $('#roleName').val(),
                description: $('#description').val()
              },
              url: '/admin/roleUpdate',
              type: 'post',
              success(data) {
                layer.msg(data.message)
                layer.close(index)
                if (data.code == 0) {
                  window.setTimeout(function () {
                    window.location.reload();
                  }, 1200)
                }
              }
            })
            // layer.close(index)
          }
        });
      }
    });

  });

  function htmlBox(role, description) {
    return '<div class="layui-form" id="box" style="margin-top: 10px;">\n'
        + '            <div class="layui-form-item">\n'
        + '              <label class="layui-form-label">角色名</label>\n'
        + '              <div class="layui-input-inline">\n'
        + '                <input type="text" id="roleName" name="roleName" required lay-verify="required"'
        + '  value="' + role + '" autocomplete="off" class="layui-input">\n'
        + '              </div>\n'
        + '              <div class="layui-form-mid layui-word-aux">要求 "ROLE_" 开头，全大写命名</div>\n'
        + '            </div>\n'
        + '            <div class="layui-form-item layui-form-text">\n'
        + '              <label class="layui-form-label">角色描述</label>\n'
        + '              <div class="layui-input-block" style="width: 350px;">\n'
        + '                <textarea id="description" name="desc" placeholder="请输入角色描述"\n'
        + '                          class="layui-textarea">' + description + '</textarea>\n'
        + '              </div>\n'
        + '            </div>\n'
        + '          </div>'
  }
</script>
</html>
